<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>购物车</title>
  <script src="../vue.js"></script>
  <style>
    table {
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
      margin: 0 auto;
      background: skyblue;
    }

    th,
    td {
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: left;
    }

    th {
      background-color: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
      background: hotpink;
    }

    h3 {
      width: 377px;
      margin: 0 auto;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-if="goods.length">
      <table>
        <thead>
          <tr>
            <th>商品名称</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="(item, index) in goods ">
            <td>{{item.name}}</td>
            <td>{{item.price}}&yen;</td>

            <td>
              <button @click="decrement(index)">-</button>
              {{item.num}}
              <button @click="increment(index)">+</button>
            </td>
            <td>
              <button @click="del(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h3><span> 总价格:{{totalPrice.toFixed(2)}}&yen;</span> <span>总数量:{{totalQuantity}}</span></h3>
    </div>
    <h3 v-else>购物车为空</h3>
  </div>
  <script>
    Vue.config.productionTip = false;
    //阻止vue启动时生成的生产提示
    /* 
    1.单个商品购买数量最少为0，最多无限制
    2.总价格和总数量要根据单个商品购买数量动态改变
    3.样式写好看点
    */
    const app = new Vue({
      el: "#app",
      data: {
        goods: [
          { id: 1, name: "iphonex", price: 999.88, num: 1, },
          { id: 2, name: "iphone6", price: 8999.75, num: 1, },
          { id: 3, name: "小米10", price: 1323.15, num: 1, },
          { id: 4, name: "iphone 14", price: 1288.87, num: 1, },
        ],

      },

      methods: {
        //减少 
        decrement(index) {//我拿到的是我点击的那个减少按钮的下标
          if (this.goods[index].num == 0) {//判断一下我点击的那个按钮的数量是0就不能再次点击 不然会出现弹出框
            alert('数量不能小于0');
          } else {
            this.goods[index].num--;//如果不小于0 就--;
          }

        },
        //增加
        increment(index) {
          this.goods[index].num++;
          //无上限 无需判断 直接++
        },
        //删除
        del(index) {
          //splice是数组的方法 index哪个下标开始 1截取多少个
          this.goods.splice(index, 1);
        },
      },
      computed: {
        totalPrice() {
          //我定义一个变量来接收总价格
          let sum = 0;
          //遍历数组 item就是我数组的每一项
          this.goods.forEach((item) => {
            //总价格 += 每一项的价钱乘以每一项的数量
            //总价格已经存在sum这个变量里面了 
            //我这里的return 不能return到totalPrice
            return sum += item.price * item.num;
          });
          return sum;
        },

        totalQuantity() {
          let quantity = 0;
          this.goods.forEach((item) => {
            quantity += item.num;
          });
          return quantity;
        }
      },
    
    //用检测实现
    
    });
  </script>
</body>

</html>